<template>
  <el-dialog
    :title="Model"
    :visible.sync="innervisivle"
    width="60%"
    :before-close="handleClose"
  >
    <el-form label-width="120px" :model="formData" :rules="rules">
      <!-- 员工管理 -->
      <template v-if="Model === '新增员工管理'">
        <el-form-item label="员工头像" prop="username">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          建议上传图片尺寸为60x60，若不设置则使用系统默认头像
        </el-form-item>
        <el-form-item label="员工账号" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="员工工号" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input
            v-model="formData.mobile"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="初始登录密码" prop="mobile">
          <el-input
            v-model="formData.mobile"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
      </template>
      <!-- 员工管理 -->
      <template v-if="Model === '新增部门管理'">
        <el-form-item label="部门LOGO" prop="username">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          建议上传图片尺寸为60x60，若不设置则使用系统默认头像
        </el-form-item>
        <el-form-item label="部门名称" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="部门地址" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="备注信息" prop="mobile">
          <el-input
            v-model="formData.mobile"
            style="width: 50%"
            placeholder="请输入"
          />
        </el-form-item>
      </template>
      <el-divider></el-divider>

      <!-- <div class="flex_box"> -->
      <template v-if="Model === '新增员工管理'">
        <el-row :gutter="1">
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="所属部门" prop="mobile">
                <el-select v-model="bmVal" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="所属专业" prop="mobile">
                <el-select v-model="zyVal" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="24"
            ><div class="grid-content bg-purple">
              <el-form-item label="所属角色" prop="mobile">
                <el-select v-model="JSval" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <el-form-item label="启用角色" prop="mobile">
                <el-switch v-model="kgvalue"> </el-switch>
              </el-form-item></div
          ></el-col>
        </el-row>
      </template>
      <template v-if="Model === '新增角色信息'">
        <el-form-item label="角色名称" prop="workNumber">
          <el-input
            v-model="formData.workNumber"
            style="width: 40%"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="角色描述" prop="workNumber">
          <el-input
            type="textarea"
            :rows="4"
            style="width: 40%"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="启用角色" prop="workNumber">
          <el-switch v-model="kgvalue"> </el-switch>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="查阅权限" prop="workNumber">
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          >
          </el-tree>
        </el-form-item>
      </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="enterBtn">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["visible", "Model"],
  data() {
    return {
      title: "",
      bmVal: "黄金糕",
      zyVal: "双皮奶",
      JSval: "黄金糕",
      kgvalue: true, //开关
      dialogVisible: false, //弹窗
      formData: {
        username: "", // 姓名
        mobile: "", // 手机号
        timeOfEntry: "", // 入职事件
        formOfEmployment: "", // 聘用形式
        workNumber: "", // 工号
        departmentName: "", // 部门
        correctionTime: "", // 转正时间
      },
      rules: {
        username: [
          { required: true, message: "用户姓名不能为空", trigger: "blur" },
          {
            min: 1,
            max: 4,
            message: "用户姓名为1-4位",
          },
        ],
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号格式不正确",
            trigger: "blur",
          },
        ],
        formOfEmployment: [
          { required: true, message: "聘用形式不能为空", trigger: "blur" },
        ],
        workNumber: [
          { required: true, message: "工号不能为空", trigger: "blur" },
        ],
        departmentName: [
          { required: true, message: "部门不能为空", trigger: "change" },
        ],
        timeOfEntry: [{ required: true, message: "入职时间", trigger: "blur" }],
      },
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      imageUrl: "", //头像图片
            data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    enterBtn() {
      this.$emit("update:visible", false);
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {},
  computed: {
    innervisivle: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>